<%@page import="com.cinemtl.beans.Movie"%>
<%@page import="java.util.ArrayList"%>
<%@page import="com.cinemtl.action.MovieAction"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cine-MTL | Admin</title>
<link rel="stylesheet"
	href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="css/flat-ui.min.css" type="text/css" />
</head>
<body>
<style>

#home{
margin-left:25px; margin-top:10px;
}
#logout{
margin-left:30px; margin-top:10px;
}
</style>
	<div class="navbar navbar-inverse  navbar-fixed-top">
		

		<div class="col-lg-offset-11">
			<a href="logout" id="logout">Logout</a>
		</div>
	</div>
	<div class="container" style="margin-top:50px;">
		<div class="row">

			<div class="col-md-12 ">

				<h2 style="text-align:center;">Movies</h2>
				<button class="btn btn-primary btn-lg " data-title="add"
					data-toggle="modal" data-target="#add"  style="margin-top:10px;">
					<span class="glyphicon glyphicon-plus">&nbsp;Add</span>
				</button>

				<div class="table-responsive"  style="margin-top:10px;">
					<table id="mytable" class="table table-bordred table-striped">

						<thead>
							<tr>
								<th>Title</th>
								<th>Edit</th>
								<th>Delete</th>
							</tr>
						</thead>
						<tbody id="bodyTab">
							<%
								MovieAction.showAllMovies(request, response);
								ArrayList<Movie> movies = (ArrayList<Movie>) request
										.getAttribute("movies");
								for (Movie movie : movies) {
							%>
							<tr id="row<%=movie.getId()%>">
								<td><%=movie.getTitle()%></td>
								<td>
									<button class="btn btn-primary btn-xs editBtn"
										data-title="Edit" data-movie="<%=movie.getId()%>"
										data-toggle="modal" data-target="#edit">
										<span class="glyphicon glyphicon-pencil"></span>
									</button>
								</td>
								<td>
									<button class="btn btn-danger btn-xs deleteBtn"
										data-title="Delete" data-toggle="modal"
										data-movie="<%=movie.getId()%>" data-target="#delete">
										<span class="glyphicon glyphicon-trash"></span>
									</button>
								</td>
							</tr>
							<%
								}
							%>

						</tbody>

					</table>

				</div>

			</div>
		</div>
	</div>


	<div class="modal fade" id="edit" tabindex="-1" role="dialog"
		aria-labelledby="edit" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">
						<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
					</button>
					<h4 class="modal-title custom_align" id="Heading">Edit Your
						Detail</h4>
				</div>

				<div class="modal-body">
					<form>
						<div class="form-group">
							<input class="form-control " name="title" type="text"
								placeholder="Title">
						</div>

						<div class="form-group">
							<input class="form-control " name="type" type="text"
								placeholder="Type">
						</div>

						<div class="form-group">
							<input class="form-control " name="duration" type="number"
								min="0" placeholder="Duration">
						</div>

						<div class="form-group">
							<input class="form-control " name="url_image" type="text"
								placeholder="Image URL">
						</div>

						<div class="form-group">
							<input class="form-control " name="url_video" type="text"
								placeholder="Video URL">
						</div>

						<div class="form-group">
							<textarea rows="2" class="form-control" name="description"
								style="resize: none;" placeholder="Description"></textarea>
						</div>
					</form>
				</div>
				<div class="modal-footer ">
					<button id="update" class="btn btn-warning btn-lg"
						style="width: 100%;">
						<span class="glyphicon glyphicon-ok-sign"></span> Update
					</button>
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal-dialog -->
	</div>



	<div class="modal fade" id="delete" tabindex="-1" role="dialog"
		aria-labelledby="delete" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">
						<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
					</button>
					<h4 class="modal-title custom_align" id="Heading">Delete this
						entry</h4>
				</div>
				<div class="modal-body">

					<div class="alert alert-danger">
						<span class="glyphicon glyphicon-warning-sign"></span> Are you
						sure you want to delete this Record?
					</div>

				</div>
				<div class="modal-footer ">
					<button id="deleteBtn" type="button" class="btn btn-success">
						<span class="glyphicon glyphicon-ok-sign"></span> Yes
					</button>
					<button type="button" class="btn btn-default" data-dismiss="modal">
						<span class="glyphicon glyphicon-remove"></span> No
					</button>
				</div>
			</div>
		</div>
	</div>

	<div class="modal fade" id="add" tabindex="-1" role="dialog"
		aria-labelledby="add" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">
						<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
					</button>
					<h4 class="modal-title custom_align" id="Heading">Add movie</h4>
				</div>

				<div class="modal-body">
					<form>
						<div class="form-group">
							<input class="form-control " name="titleAdd" type="text"
								placeholder="Title">
						</div>

						<div class="form-group">
							<input class="form-control " name="typeAdd" type="text"
								placeholder="Type">
						</div>

						<div class="form-group">
							<input class="form-control " name="durationAdd" type="number"
								min="0" placeholder="Duration">
						</div>

						<div class="form-group">
							<input class="form-control " name="url_imageAdd" type="text"
								placeholder="Image URL">
						</div>

						<div class="form-group">
							<input class="form-control " name="url_videoAdd" type="text"
								placeholder="Video URL">
						</div>

						<div class="form-group">
							<textarea rows="2" class="form-control" name="descriptionAdd"
								style="resize: none;" placeholder="Description"></textarea>
						</div>
					</form>
				</div>
				<div class="modal-footer ">
					<button id="addBtn" class="btn btn-success btn-lg"
						style="width: 100%;">
						<span class="glyphicon glyphicon-plus"></span> Add
					</button>
				</div>
			</div>
		</div>
	</div>

	<script
		src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<script
		src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
	<script src="js/admin.js"></script>
</body>
</html>